<template>
	<div>
		<div ref="mapbox">{{location}}</div>
		<button @click="getLocation">获取当前地理位置信息</button>
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name: 'Map',
		setup(  ) {
			var mapbox = ref(null)
			var location = ref('点击这个按钮，获得你的坐标')
			// const TMap = (window as any).TMap
			function getLocation() {
				if (navigator.geolocation) {
					// 获取当前地理位置
					navigator.geolocation.getCurrentPosition((position) => {
						// console.log('latitude:' + position.coords.latitude)
						// console.log('longitude:' + position.coords.longitude)
						let lati = position.coords.latitude
						let longi = position.coords.longitude
						initMap(lati,longi)
						//location.value = '获取地理位置成功'
					})
				} else {
					location.value = 'Geolocation is not supported by this.browser.'
				}
			}
			/*initMap() {
			//定义地图中心点坐标
			var center = new TMap.LatLng(39.984120, 116.307484)
			//定义map变量，调用 TMap.Map() 构造函数创建地图
			var map = new TMap.Map(document.getElementById('container'), {
			    center: center,//设置地图中心点坐标
			    zoom: 17.2,   //设置地图缩放级别
			    pitch: 43.5,  //设置俯仰角
			    rotation: 45    //设置地图旋转角度
			});
			}*/
			const TMap = window.TMap
			function initMap(latitude,longtitude) {
				//定义地图中心点坐标
				var center = new TMap.LatLng(latitude, longtitude)
				//定义map变量，调用 TMap.Map() 构造函数创建地图
				var map = new TMap.Map(mapbox.value, {
					center: center, //设置地图中心点坐标
					zoom: 10, //设置地图缩放级别
					pitch: 43.5, //设置俯仰角
					rotation: 45 //设置地图旋转角度
				})
				console.log(map)
			}
			return {
				getLocation,
				location,
				mapbox
			}
		},
		watch: {
			location: {
				handler(newValue, oldValue) {
					console.log('newValue:' + newValue)
					console.log('oldValue:' + oldValue)
				}
			}
		}
	}
</script>
<style>

</style>
